import React, { memo, useState, useEffect } from "react";
import { selectNewsFIRST, addMyFavorites } from '../../services/home'
import css from './css.module.scss'
import DownloadList from '../../components/DownloadList'
import WxImg from '../../assets/img/wx.png'
import WbImg from '../../assets/img/wb.png'
import { PrinterOutlined, StarOutlined, StarFilled } from '@ant-design/icons'
import { handShare } from '../../common/share'
import ReactToPrint from 'react-to-print';
import { Popover, message } from 'antd'
import { newQRCode } from '../../common/utils'
export default memo(function NewsDetails(props) {
    const { search } = props.location
    const newsId = search.split('?')[1]
    const [newsDetails, setNewsDetails] = useState({})
    const [componentRef, setComponentRef] = useState('')
    const init = (newsId) => {
        selectNewsFIRST({ newsId: newsId }).then(res => {
            if (res.data.accessory) {
                res.data.accessory = JSON.parse(res.data.accessory)
            }
            setNewsDetails(res.data)
        })
    }
    useEffect(() => {
        init(newsId)
    }, [newsId]);
    const shareWb = () => {
        handShare()
    }

    const content = newQRCode(newsId)
    const handCollect = async (e) => {
        const res = await addMyFavorites({ newsId })
        message.success(res.content)
        init(newsId)
    }
    return (
        <div className='w ptb60'>
            <div className={css.title}>
                {newsDetails.title}
            </div>
            <div className={css.nav_top}>
                <div className={css.nav_title}>
                    时间：{newsDetails.updateTime} 来源：{newsDetails.subhead}
                </div>
                <div className={css.fun_btn}>
                    <div><PrinterOutlined style={{ marginRight: '6px' }} />
                        <ReactToPrint
                            trigger={() => <span>打印</span>}
                            content={() => componentRef}
                        />
                    </div>
                    <div onClick={e => handCollect(e)}>
                        {/* favoritesId有值 说明是收藏 */}
                        {newsDetails.favoritesId ? <StarFilled style={{ marginRight: '6px', color: '#0050a5' }} /> : <StarOutlined style={{ marginRight: '6px' }} />}
                        收藏</div>
                    <Popover content={content} title="分享到微信">
                        <img src={WxImg} alt="微信" />
                    </Popover>
                    <img src={WbImg} alt="微博" onClick={e => shareWb(e)} />
                </div>
            </div>
            <div className='w' ref={el => (setComponentRef(el))}>
                <div style={{ width: '800px', margin: '0 auto' }}>
                    <div className='rech_text' dangerouslySetInnerHTML={{ __html: newsDetails.content }}>
                    </div>
                    <DownloadList list={newsDetails.accessory} />
                </div>
            </div>

        </div >
    );
});
